<!-- Add jQuery UI main JS and CSS files -->
<script type="text/javascript" src="<?php echo __TEMPLATE_URL; ?>assets/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo __TEMPLATE_URL; ?>assets/jquery-ui/jquery-ui.min.css" media="screen" />

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="<?php echo __JS_URL; ?>fancyBox/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="<?php echo __JS_URL; ?>fancyBox/jquery.fancybox.css?v=2.1.5" media="screen" />

<div style="margin-top:0px" class="box">
                            <div class="box-title">
                                <h3><i class="icon-picture"></i> Gallery</h3>
                                <div class="box-tool">
                                    <a href="#" onclick="javascript:parent.$.fancybox.close();"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <div class="clearfix">
                                    <div class="pull-right btn-toolbar">
                                                <a data-original-title="Upload new images" href="#" class="btn btn-primary show-tooltip" title=""><i class="icon-cloud-upload"></i> Upload</a>
                                    </div>
                                </div>
                                <hr>
                                <ul id="sortable" class="gallery">
                                    <li id="item-1" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/1.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/1_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-2" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/2.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/2_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-3" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/3.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/3_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-4" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/4.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/4_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-5" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/5.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/5_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-6" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/6.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/6_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-7" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/7.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/7_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-8" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/8.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/8_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-9" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/9.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/9_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                    <li id="item-10" class="ui-state-default">
                                        <a href="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/10.jpg" rel="prettyPhoto" title="Description of image">
                                            <div>
                                                <img src="<?php echo __TEMPLATE_URL; ?>img/demo/gallery/10_thumb.jpg" alt="">
                                                <i></i>
                                            </div>
                                        </a>
                                        <div class="gallery-tools">
                                            <a href="#"><i class="icon-link"></i></a>
                                            <a href="#"><i class="icon-paper-clip"></i></a>
                                            <a href="#"><i class="icon-pencil"></i></a>
                                            <a href="#"><i class="icon-trash"></i></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        
                        
<script>

$(document).ready(function () {
    $('#sortable').sortable({

        stop: function (event, ui) {
	        var oData = $(this).sortable('serialize');
//            $('span').text(data);
            console.debug(oData);
            
            $.ajax({
				data: oData,
                type: 'POST',
                url: '<?php echo site_url('page/gallery/sort-order'); ?>',
                success: function(msg){
                    
                    alert("success");
                    console.debug(msg);
                    
                },
                error:function(){
                    alert("failure");

                }                
            });
		}
    });
    //$( "#sortable" ).disableSelection();
    
});

</script>                        
                        
                        